<template>
    <div>
        <div class="products-holder">
            <div v-for="product in products" :key="product.id" class="product-holder">
                <img class="product-img" :src="productPictureUrl + product.id">
                <div class="product-desc">
                    <div class="product-name">{{ product.name }}</div>
                    <div class="product-amount">
                        <span style="float:left;">月售{{ product.sellamount }}份</span>
                        <span style="float:right;margin-right:10px;">库存{{ product.restamount }}份</span>
                    </div>
                    <div class="product-price">￥{{ product.price }}</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { FileApi } from 'services/apiConfig.js'

export default {
  data() {
    return {
      selectedProject: null,
      createProjectFormVisible: false,
      createProjectForm: {
        name: '',
        description: ''
      },
      productPictureUrl: FileApi.product.getUrl
    }
  },
  props: ['products']
}
</script>
<style scoped>
.products-holder {
    margin-top: 10px;
    width: 1200px;
    /* height: 800px; */
    margin-left: auto;
    margin-right: auto;
    /* background-color: #ffffff; */
}
.product-holder {
  float: left;
  width: 300px;
  height: 100px;
  background-color: #ffffff;
  padding: 10px;
  box-sizing:border-box;  
  border: 1px solid #E4E7ED;
  text-align: left;
  margin-bottom: 10px;
}
.product-holder:hover {
  cursor: pointer;
  background-color: #F5F5F5;
}
.product-img {
  width: 80px;
  height: 80px;
  float: left;
  /* background-color: blue; */
}
.product-desc {
  width: 198px;
  height: 80px;
  /* background-color: yellow; */
  float: left;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.product-name {
  margin-left: 10px;
  font-size: 16px;
  font-weight: 600;
}
.product-price {
  margin-left: 10px;
  font-size: 15px;
  font-weight: 500;
  color: red;
}
.product-amount {
  margin-left: 10px;
  font-size: 13px;
  color: #606266;
}
</style>